import React, { Component, useState, useEffect } from 'react'

export default function Wurantop() {

    const [list, setlist] = useState([
        { id: 1, lv: "Ⅰ", name: "松花江", sheng: "山西省", wuran: '重度', long: "312" }
        , { id: 2, lv: "Ⅱ", name: "松花江", sheng: "山西省", wuran: '重度', long: "312" }
        , { id: 3, lv: "Ⅱ", name: "松花江", sheng: "山西省", wuran: '重度', long: "312" }
        , { id: 4, lv: "Ⅱ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }
        , { id: 5, lv: "Ⅲ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }
        , { id: 6, lv: "Ⅲ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }
        , { id: 7, lv: "Ⅲ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }
        , { id: 8, lv: "Ⅳ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }
        , { id: 9, lv: "Ⅳ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }
        , { id: 10, lv: "Ⅳ", name: "松花江", sheng: "山西省", wuran: '中度', long: "312" }

    ])
    const [top, settop] = useState<number>(0)

    let timer = setTimeout(() => {
        settop(top - 30)
    }, 3000)

    if (top == -150) {
        clearTimeout(timer)
        let times = setTimeout(() => {
            settop(top + 150)
        }, 3000)
    }

    return (
        <div className='topbox' style={{ top: top + "px", transition: "1s" }}>
            {list.map(item =>
                <div className="item">
                    <div>{item.id}</div>
                    <div>{item.lv}级</div>
                    <div>{item.name}</div>
                    <div>{item.sheng}</div>
                    <div>{item.wuran}污染</div>
                    <div>{item.long}公里</div>
                </div>
            )}
        </div>
    )

}
